<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Axis Grid Lines</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>

<script type="text/javascript">
    var height = 500, 
        width = 500, 
        margin = 25;       
    
    var svg = d3.select("body").append("svg")
            .attr("class", "axis")
            .attr("width", width)
            .attr("height", height);
    
    function renderXAxis(){
        var axisLength = width - 2 * margin;
    
        var scale = d3.scale.linear()
                        .domain([0, 100])
                        .range([0, axisLength]);
        
        var xAxis = d3.svg.axis()
                .scale(scale)
                .orient("bottom");
                
        svg.append("g")       
            .attr("class", "x-axis")
            .attr("transform", function(){ // <-A
                return "translate(" + margin + "," + (height - margin) + ")";
            })
            .call(xAxis);
            
        d3.selectAll("g.x-axis g.tick") // <-B
            .append("line") // <-C
                .classed("grid-line", true)
                .attr("x1", 0) // <-D
                .attr("y1", 0)
                .attr("x2", 0)
                .attr("y2", - (height - 2 * margin));  // <-E
    }
    
    function renderYAxis(){        
        var axisLength = height - 2 * margin;
    
        var scale = d3.scale.linear()
                        .domain([100, 0])
                        .range([0, axisLength]);
    
        var yAxis = d3.svg.axis()
                .scale(scale)
                .orient("left");
            
        svg.append("g")       
            .attr("class", "y-axis")
            .attr("transform", function(){
                return "translate(" + margin + "," + margin + ")";
            })
            .call(yAxis);
            
        d3.selectAll("g.y-axis g.tick")
            .append("line")
                .classed("grid-line", true)
                .attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", axisLength) // <-F
                .attr("y2", 0);
    }   
    
    renderYAxis();
    renderXAxis();
</script>

</body>

</html>